<template>
	<view class="">


		<view class="flex-row items-center group" @click="oncity">
		  <image v-if="type==1"
		    class="shrink-0 image_4"
		    src="https://qiniu.ccchongya.com/chongya/images/16947555487802052701.png"
		  />

		  <image v-else
		    class="shrink-0 image_4"
		    src="https://qiniu.ccchongya.com/chongya/images/16967453055641285259.png"
		  />

		  <text class="font_2 text_2" >{{regiontext}}</text>

		</view>



		<popup-layer ref="popupRef" :direction="'right'">
			<view style="width:750upx;height: 100%;">
				<citySelect @back_city="back_city"  v-if="currentAddressinfo.city" :currentAddressinfo="currentAddressinfo" ></citySelect>
			</view>
		</popup-layer>

	</view>
</template>

<script>
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		props: {
			currentAddressinfo: {
				type: Object,
				default:() => {
					return {}
				}
			},
			type: {
				type: Number,
				default: 1
			},
			autoLocation: {
				type: Boolean,
				default: true
			},
			// region: '请选择...',
			region: {
				type: String,
				default: '请选择...'
			},
			// //查询提示文字
			// placeholder: {
			// 	type: String,
			// 	default: '请输入城市名称'
			// },
			// //传入要排序的名称
			// formatName: {
			// 	type: String,
			// 	default: 'cityName'
			// },
			// //当前定位城市
			// activeCity: {
			// 	type: Object,
			// 	default: () => null
			// },
			// //热门城市
			// hotCity: {
			// 	type: Array,
			// 	default: () => []
			// },
			// //城市数据
			// obtainCitys: {
			// 	type: Array,
			// 	default: () => []
			// },
			// //是否有搜索
			// isSearch: {
			// 	type: Boolean,
			// 	default: true
			// }

		},

		watch: {
			obtainCitys(newData) {
				this.updateCitys(newData);
			},

			  region: {
			  				handler(n, o) {

			  								console.log("this.region change",this.n);
			  								this.regiontext = n
			  				},
			  				immediate:true,
			  				//该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
			  				deep: true
			  },
			  currentAddressinfo: {
				handler(n, o) {

								this.position = n.city
								console.log("this.position",this.position);
				},
				immediate:true,
				//该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
				deep: true
			  }
		},
		components: {
			citySelect,
			popupLayer
		},
		computed: {},
		data() {
			return {

				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				// regiontext: '请选择...', //地区
			}
	   	},
	    created() {
			//获取存储的最近访问
			var that = this


			if(this.autoLocation){
				that.mapfun.getlocation().then(res => {
					that.mapfun.getCityinfo().then(res => {
						  that.regiontext =  res.addressComponent.province+res.addressComponent.city
					}).catch(err => {
					})
				}).catch(err => {

					// console.log("eeeeeeeeee")
				})
			}
			// that.mapfun.getCityinfo().then(res => {
			// 	that.region =  res.province+res.city
			// }).catch(err => {})


		},
		mounted() {
			this.$refs.popupRef.close();
		},
		methods: {
			oncity() {
				var that = this

				if(this.autoLocation){
					uni.navigateTo({
						url: `/pages/a`
					});
				}else{
					this.$refs.popupRef.show();

				}

			},
			back_city(e) {
				if (e !== 'no') {
					this.regiontext = e.cityName
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			}
		}
	};
</script>

<style scoped>
	.height {
		height: var(--status-bar-height);
	}

	.group {
	  padding-left: 0rpx;
	}
	.image_4 {
	  width: 38rpx;
	  height: 38rpx;
	}
	.font_2 {
	  /* font-size: 24rpx; */
	  font-family: HarmonyOSSansSC;
	  line-height: 22rpx;
	  color: #666e7a;
	}
	.text_2 {
	  margin-left: 8rpx;
	  /* color: #ffffff; */
	}

</style>
